<template>
  <div>
    <div class="title" @click="change">
      <slot name="title"></slot>
    </div>
    <div class="sub" v-show="flag">
      <slot></slot>
    </div>
  </div>
</template>
  
<script setup lang='ts'>
import { ref } from 'vue';

const flag = ref(true)
const change = () => {
  flag.value = !flag.value;
}
</script>
  
<style scoped>
.sub {
  padding-left: 20px;

}

.title,
sub {
  background-color: aquamarine;
  margin-top: 5px;
  width: 100px;
  line-height: 40px;
  text-align: center;
}
</style>